﻿<UserControl
  x:Class="CustomSlider_CS.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:my="clr-namespace:CustomSlider_CS"
  Width="Auto" Height="Auto" 
  >
  <UserControl.Resources>

    <Style x:Key="CustomSlider" TargetType="Slider">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Slider">
            <Grid x:Name="Root">
              <Grid.Resources>
                <ControlTemplate x:Key="RepeatButtonTemplate">
                  <Grid x:Name="Root" Background="Transparent" Opacity="0"/>
                </ControlTemplate>
              </Grid.Resources>
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0" />
                  </VisualStateGroup.Transitions>
                  <VisualState x:Name="Normal"/>
                  <VisualState x:Name="MouseOver"/>
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                  <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0" />
                  </VisualStateGroup.Transitions>
                  <VisualState x:Name="Unfocused"/>
                  <VisualState x:Name="Focused">
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="(UIElement.Opacity)">
                        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <Grid x:Name="HorizontalTemplate">
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="Auto"/>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Rectangle Height="3" Margin="5,0,5,0" Grid.Column="0" Grid.ColumnSpan="3" Fill="#FFE6EFF7" Stroke="Black" StrokeThickness="0.5"/>
                <RepeatButton IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0"/>
                <Rectangle x:Name="LeftTrack" Grid.Row="1" Fill="#00FFFFFF" Cursor="Hand"/>
                <Thumb Height="18" x:Name="HorizontalThumb" Width="11" Grid.Column="1"/>
                <RepeatButton IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2"/>
                <Rectangle x:Name="RightTrack" Grid.Column="2" Grid.Row="1" Fill="#00FFFFFF" Cursor="Hand"/>
              </Grid>
              <Grid x:Name="VerticalTemplate" Visibility="Collapsed">
                <Grid.RowDefinitions>
                  <RowDefinition Height="*"/>
                  <RowDefinition Height="Auto"/>
                  <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Rectangle Margin="0,5,0,5" Width="3" Grid.Row="0" Grid.RowSpan="3" Fill="#FFE6EFF7" Stroke="Black" StrokeThickness="0.5"/>
                <RepeatButton IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" Grid.Row="2"/>
                <Thumb Height="11" x:Name="VerticalThumb" Width="18" Grid.Row="1"/>
                <RepeatButton IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" Grid.Row="0"/>
              </Grid>
              <Rectangle x:Name="FocusVisual" IsHitTestVisible="false" Opacity="0" Stroke="#666666" StrokeDashArray=".2 5" StrokeDashCap="Round"/>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </UserControl.Resources>
  
  <Grid x:Name="LayoutRoot" Background="White" Height="150" Width="500" >
    <my:SliderExt Cursor="Hand" HorizontalAlignment="Stretch" 
                                VerticalAlignment="Stretch" 
                                LargeChange="10" Maximum="100" SmallChange="1" Value="20" 
                                x:Name="MySlider" Style="{StaticResource CustomSlider}"/>
  </Grid>
  
</UserControl>